<template lang="html">
  <div>
    <selfHeader></selfHeader>

    <div class="marginBox">
      <img :src="image" alt="">
      <div class="mint-cell-wrapper alipayNum">支付宝账号: {{ aliplayName }}</div>
    </div>

    <div>
      <mt-field label="支付密码" placeholder="请输入支付密码" v-model="from.payCode"></mt-field>
      <img v-if="dataUrl === ''" src="../assets/upload.png" alt="" @click='upload()'>
      <img v-else :src="'http://114.55.102.36:8809' + from.image" alt="" @click='upload()'>
    </div>

    <div class="listBox">
      <input style='display: none' ref="filElem" type="file" class="upload-file" @change="previewFile">
    </div>

    <button class="buy_play_big" @click="sure">确认</button>
  </div>
</template>

<script>
import {orderUpdate, gameOkPlay, gamePlay} from '@/http/api'
import {Toast, Field} from 'mint-ui'
import selfHeader from '@/common/header'

export default {
  components: {
    Field,
    selfHeader
  },
  data() {
    return {
      type: '',
      aliplayName: '',
      image: '',
      id: '',
      dataUrl: '',
      from: {
        payCode: '',
        image: ''
      }
    }
  },
  created() {
    const {
      type,
      aliplayName,
      image,
      id
    } = this.$route.query
    this.type = type
    this.aliplayName = aliplayName
    this.image = image
    this.id = id
  },
  methods: {
    upload() {
      this.$refs.filElem.click()
    },
    previewFile () {
      const file = this.$refs.filElem.files[0];
      // var reader = new FileReader();
      const formData = new FormData()
      formData.append('file', file)
      const xhr = new XMLHttpRequest()
      let that = this
      xhr.onreadystatechange = function () {
        const result = JSON.parse(xhr.responseText)
        let dataUrl = result.data.path
        if (dataUrl) {
          that.from.image = dataUrl
          that.dataUrl = dataUrl
        }
      }
      xhr.open('POST', 'http://114.55.102.36:8809/api/shared/upload/image', true)
      xhr.send(formData)
    },
    async sure () {
      if (this.type === 'order') {
        const data  = {
          id: this.id,
          payImage: this.dataUrl
        }
        const res = await orderUpdate(data)
        if (res.code * 1 === 200) {
          Toast('已经提交')
        } else {
          Toast(res.message)
        }
      }
      if (this.type === 'buiness') {
        const user = JSON.parse(localStorage.getItem('UserMessage'))
        const data  = {
          payCode: this.from.payCode,
          orderId: this.id,
          uid: user.user.uid,
          playImg: this.dataUrl
        }
        const res = await gameOkPlay(data)
        if (res.code * 1 === 200) {
          Toast('已经提交')
        } else {
          Toast(res.message)
        }
      }
      if (this.type === 'teaOil') {
        const user = JSON.parse(localStorage.getItem('UserMessage'))
        const data  = {
          payCode: this.from.payCode,
          tid: this.id,
          uid: user.user.uid,
          playImg: this.dataUrl
        }
        const res = await gamePlay(data)
        if (res.code * 1 === 200) {
          Toast('已经提交')
        } else {
          Toast(res.message)
        }
      }
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.main {
  width: 100%;
  padding-top: 60px;
  background-color: #f5f5f5;
}

img {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin: 0 auto;
  display: block;
}

.activeBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  padding-bottom: 2px;

  .activeChoose {
    color: #048AB9;
    border-bottom: 2px solid #048AB9;
    font-weight: 600;
  }
}

.orderList {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #048AB9;
  border-radius: 6px;
  overflow: hidden;
  padding: 6px;

  .contentBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    img {
      width: 40%;
      height: 80px;
    }

    div {
      width: 55%;
      display: block;
    }
  }

  .addressBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;

    img {
      width: 13px;
      height: 13px;
    }

    span:first-child {
      font-size: 15px;
      width: 30%;
      display: block;
      font-weight: 600;
    }

    spam:last-child {
      font-size: 13px;
      color: #8a8a8a;
    }
  }
}

.listBox {
  padding: 0 10px;
}

.price {
  font-weight: normal;
  margin-top: 10px;

  span {
    font-weight: 600;
    margin-top: 6px;
    display: block;
  }

  b {
    font-weight: normal;

    i {
      display: block;
    }
  }

  i:first-child {
    color: #4caf50;
    font-size: 20px;
  }

  i:last-child {
    color: #4caf50;
    font-size: 13px;
    padding-left: 8px;
  }
}

.self_btn {
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
}

.btnBox {
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid #048AB9;
  display: flex;
  justify-content: flex-end;
}
.marginBox {
  margin-top: 80px;
  span {
    margin-top: 10px;
  }
}
.buy_play_big {
  width: 150px;
  background: #048AB9;
  color: white;
  height: 40px;
  vertical-align: middle;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  margin: 30px auto;
}
.alipayNum {
  height: 48px;
}
</style>
